import * as React from 'react';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import ListSubheader from '@mui/material/ListSubheader';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import PeopleIcon from '@mui/icons-material/People';
import BarChartIcon from '@mui/icons-material/BarChart';
import LayersIcon from '@mui/icons-material/Layers';
import AssignmentIcon from '@mui/icons-material/Assignment';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import ExpandMore from '@mui/icons-material/ExpandMore';
import ExpandLess from '@mui/icons-material/ExpandLess';
import Collapse from '@mui/material/Collapse';
import List from '@mui/material/List';
import StarBorder from '@mui/icons-material/StarBorder';
import { useNavigate } from "react-router-dom";
import { uniqueId } from '@@/utils/index';




export const SubMenu = (props) => {

    const { item } = props

    const [mainMenuOpen, setMainMenuOpen] = React.useState(false)

    // const navigate = useNavigate()

    const toogleMainMenu = () => {
        setMainMenuOpen((pre) => !pre);
    }

    // const gotoMenuPath = (path) => {
    //     navigate(path)
    // }


    return (

        <div>
            <ListItemButton onClick={toogleMainMenu}>
                <ListItemIcon>
                    <PeopleIcon />
                </ListItemIcon>
                <ListItemText primary={item.name} />
                {mainMenuOpen ? <ExpandLess /> : <ExpandMore />}
            </ListItemButton>


            <div>
                <Collapse in={mainMenuOpen} timeout="auto" unmountOnExit>
                    <List component="div" disablePadding>
                        {
                            item.children.map(child_item => {
                                return (
                                    <ListItemButton key={uniqueId()} sx={{ pl: 4 }} onClick={() => child_item.onClick()}>
                                        <ListItemIcon>
                                            <StarBorder />
                                        </ListItemIcon>
                                        <ListItemText primary={child_item.name} />
                                    </ListItemButton>
                                )
                            })
                        }
                    </List>
                </Collapse>
            </div>
        </div>
    )
}



// 
export const OneMenu = (props) => {
    const { item } = props

    const navigate = useNavigate()

    const gotoMenuPath = (path) => {
        navigate(path)
    }

    return (
        <ListItemButton onClick={() => item.onClick()} >
            <ListItemIcon>
                <InboxIcon />
            </ListItemIcon>
            <ListItemText primary={item.name} />
        </ListItemButton>
    )
}
